<template>
  <div class="container">
    <h3>
      首页
    </h3>
    <el-carousel>
      <el-carousel-item v-for="item of banner" :key="item.id">
        <nuxt-link  :to="{name:'goods-id',params:{id:(item.id/1)},query:{a:111,b:222}}" :title="item.title">
          <img :src="item.linkUrl" class="img"/>
          <div class="title_bg">
              <h3 class="title">{{item.title}}</h3>
            </div>  
        </nuxt-link>
        <!-- 正常应该采用如下方式 由于演示 只是简单处理 -->
         <!-- <nuxt-link :to="{name:'goods-id',params:{id:3},query:{a:111,b:222}}">商品03</nuxt-link> -->
      </el-carousel-item>
    </el-carousel>

  <el-row class="home" :gutter="20">
    <el-col :span="8" v-for="item of home" :key="item.id">
      <el-card :body-style="{padding:'3px'}" style="margin-bottom:20px">
        <img :src="item.linkUrl" class="card-img"/>
        <div>
          <span>{{item.title}}</span>
          <div class="bottom clearfix">
           <time class="time">{{item.createTime}}</time>
           <el-button class="button" type="warning" icon="el-icon-star-off" circle></el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>

    <h4>同域资源</h4>
    <!-- <span >{{title}}</span> -->
    
    <h4>跨域资源</h4>
    <!-- <span >{{home_ip}}}</span> -->

  <h4>vuex操作</h4>
  <button @click="getStore">编程式操作</button>

  <div>index getters: {{getNav}}</div>
  <div>index state: {{bNav}}</div>
  <div>user state: {{data}}</div>
  <div>user state: {{banner}}</div>

  <h4>内部资源指向问题</h4>
  <!-- 相对路径找到一些需要压缩的资源  assets-->
  <img src="../assets/imgs/apic25986_s.jpg" alt="">
  <!-- 绝对路径找到不需要压缩的资源 指向static -->
  <img src="/imgs/apic25986_s.jpg" alt="">
  <div class="bgimg">css指向需要压缩的资源</div>

  <h4>外部资源</h4>
  <el-button onclick="alert($)">外部资源调用</el-button>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue';
//引入vuex的辅助函数
import {mapActions,mapGetters,mapState,mapMutations} from 'vuex';
export default {
  // middleware: 'auth',//页面层级中间件定义 定义到外部的方式
  middleware(){
    console.log('middleware pageindex');
  },
  validate(params,query){//用于校验参数 可以拿到上下文，主要会用来抓取params,query等信息
    //校验业务
    console.log('validate run');
    return true;

  },
  //读取数据返回组件 
  async asyncData({$axios}){ //组件渲染之前就已经执行了
    // //异步业务逻辑，读取服务端数据
    // console.log('asyncData');
    // return {
    //   b:2
    // }
    // let res = await $axios({url:"/data/list.json"})
    // console.log("读取到的静态资源：",res.data);

    // let res2 = await $axios({url:"http://api.ipify.org/?format=json"});
    // let res2 = await $axios({url:"/api/?format=json"});
    // console.log("读取到的跨域资源：",res2.data);

    let res2 = await $axios({url:"/api/banner",params:{limit:3}});
    console.log("读取到的banner资源：",res2.data);

    return  {
      banner:res2.data.data
      // ip:res2.data.ip
    }
    
  },
  //读取数据，vuex(状态树)
  //服务端的钩子 是无法使用this和window的 如果要发送请求必须依赖nuxt的上下文
  async fetch({$axios,store,error}){
    //异步业务逻辑，读取服务端数据提交给vuex
    // console.log('fetch');
    let res =  await $axios({url:"/api/banner",params:{limit:3}});
    console.log("读取到的首页资源：",res.data);
    res.data && store.commit('home/M_UPDATE_HOME',{err:0,data:res.data});

  },
  //SSR && CSR
  beforeCreate(){
    console.log('beforeCreate');
  },
  created(){
    console.log('created');
  },
    //页面本身数据
  data(){
    return {
      a:1
    }
  }, 
  //CSR
  beforeMount(){

  },
  mounted(){
    console.log('mounted');

  },
  beforeUpdate(){

  },
  updated(){
    console.log('updated');
  },
  beforeDestroy(){

  },
  destroyed(){

  },
  methods:{
    getStore(){
      //编程式访问 vuex
      //发出actions请求给user模块
      // this.$store.dispatch('user/A_UPDATE_USER',{err:0,msg:'登录成功',token:'000',data:{title:'user的action提交的数据'}})
      //发出mutation请求的user模块
      // this.$store.commit('user/M_UPDATE_USER',{err:0,msg:'登录成功',token:'000',data:{title:'组件携带过去的数据'}})

      //通过vue实例属性
      this.A_UPDATE_USER({err:0,msg:'登录成功',token:'000',data:{title:'vue实例属性提交的数据'}});
      //通过vue实例属性发出commit
      // this.M_UPDATE_USER({err:0,msg:'登录成功',token:'000',data:{title:'vue实例属性提交的mutation数据'}});
    }
    ,
    //辅助函数mapActions和mapMutations作用域在methods 可以通过它解析模块的对应action 和 mutation 这样可以将这两个类型编程vue实例身上的实例属性，从而直接在组件中使用
    ...mapActions('user',['A_UPDATE_USER']),
    ...mapMutations('user',['M_UPDATE_USER']),
  }
  ,
  computed:{//mapGetters mapState 是用来接管计算属性 
    xx(){},
    //获取跟模块的getNav属性，因为是跟模块所以不要加模块名称
    ...mapGetters(['getNav']),
    //获取跟模块的数据
    ...mapState(['bNav']),
    //获取user的state
    ...mapState('user',['data']),
    //获取home的state
    ...mapState({
      // //区别于原先的IP
      // home_ip:state=>state.home.data
      home:state=>state.home.data.data
    })
  }
  //服务端渲染 激活、失活钩子不存在 
  // activated(){},
  // deactivated(){},
  // components:{
  //   Logo
  // },
}
</script>

<style scoped>
.el-carousel__item .img{
  width:100%;
  height: auto;
}
.el-carousel__item .title_bg{
  background: rgba(0,0,0, .5);
  color: #fff;
  height: 60px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 999;
}
.card-img{
  width:100%;
  height:60px;
  display: block;
}
.home{
  margin-top:20px;
}
.time{
  font-size: 13px;
  color: #999;
}
.bottom{
  margin-top:13px;
  line-height:12px;
}
.button{
  padding:0px;
  float: right;
}
.bgimg{
  height: 200px;
  color: #000;
  background: url('../assets/imgs/zzpic12342_s.jpg') no-repeat;
}
</style>
